* {
  margin: 0px;
  padding: 0;
  box-sizing: border-box;
  font-family: "Almarai", sans-serif;
  list-style: none;
}

.header {
  position: fixed;
  z-index: 10;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0); /* Default transparent background */
  transition: background-color .2s ease;
  color: #fff;
  width: 100%;
}

.header__container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start; /* Changed from center to align logo to top */
  padding: 8px 32px;
}

.header__logo {
  height: 70px; /* --- ADJUST DESKTOP LOGO HEIGHT HERE --- (Reverted from extreme value) */
  display: block; /* Ensure images behave predictably */
}

.header__logo--black {
  display: none; /* Keep black logo always hidden as per new request */
}

/* REMOVED RULES FOR LOGO COLOR CHANGE ON SCROLL */
/* The white logo will now always be displayed */

@media (max-width: 768px) {
  .header__logo {
    height: 50px; /* --- ADJUST MOBILE LOGO HEIGHT HERE --- (Using height instead of width) */
    width: auto;  /* Let width adjust automatically */
  }
}

/* --- Logo color switch ONLY on mobile when header is fixed --- */
@media (max-width: 768px) {
  .header--fixed .header__logo--white {
    display: none; /* Hide white logo */
  }

  .header--fixed .header__logo--black {
    display: block; /* Show black logo */
  }
}
/* --- End mobile logo color switch --- */

.header__overlay {
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(22, 18, 10, .8);
  position: fixed;
  top: 0;
  left: 0;
}

.header__overlay--is-visible {
  display: block;
}

.header__hamburger-btn {
  display: none; /* Hidden by default */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 11; /* Above header */
}

.header__hamburger-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #fff; /* White lines */
  margin: 5px 0;
  transition: all 0.3s ease-in-out;
}

.header__nav {
  display: flex;
  align-items: center;
  font-size: .8em;
}

.header__nav__dropdown {
  display: none;
  text-align: center;
  position: absolute;
}

.header__nav__links {
  display: flex;
  gap: 16px;
}

.header__nav__links li:hover .header__nav__dropdown {
  display: block;
}

.header__nav__link {
  padding: 8px 0;
  color: #fff;
  display: block;
  text-decoration: none; /* Ensure links are not underlined */
}

/* Dropdown Menu Styling */
.header__nav__links li.header__nav__item--has-dropdown { /* More specific for the LI */
  position: relative; /* Needed for absolute positioning of dropdowns */
}

.header__nav__item--has-dropdown:hover > .header__nav__dropdown {
    display: block;
}

.header__nav__dropdown {
  /* display: none; is already set by default and toggled by hover */
  position: absolute;
  top: 100%; /* Position below the parent link */
  left: 0;
  background-color: rgba(30, 29, 49, 0.95); /* Updated background color */
  border-radius: 0 0 4px 4px;
  padding: 8px 0;
  min-width: 230px; /* Adjust as needed */
  z-index: 100; /* Ensure dropdown is above other content */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  list-style: none; /* Ensure no bullets */
}

.header--fixed .header__nav__dropdown {
  background-color: rgba(30, 29, 49, 0.95); /* Updated solid background when header is fixed */
}

.header__nav__dropdown > li > a { /* Direct children links */
  padding: 10px 20px;
  color: #fff;
  display: block;
  white-space: nowrap;
  text-align: left;
  font-size: 0.9em; /* Slightly smaller than main nav links */
  text-decoration: none;
}

.header__nav__dropdown > li > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff; /* Keep text white on hover */
}
@media (max-width: 768px) {
  .header__hamburger-btn {
    display: block; /* Show hamburger on mobile */
  }

  .header__nav {
    display: none; /* Hide nav by default on mobile */
    position: fixed;
    top: 70px; /* Position below the header */
    left: 0;
    width: 100%;
    height: calc(100vh - 70px); /* Adjust height */
    background-color: rgba(30, 29, 49, 0.95); /* Dark background for mobile menu */
    flex-direction: column;
    justify-content: flex-start; /* Align items to the top */
    align-items: center;
    z-index: 10; /* Below hamburger, above header content */
    padding-top: 20px; /* Adjust padding */
  }

  .header__nav--is-open {
    display: flex; /* Show nav when open */
  }

  .header__nav__links {
    flex-direction: column; /* Stack links vertically */
    gap: 20px;
    text-align: center;
  }

  .header__nav__link {
    display: block; /* Ensure links are block level */
    padding: 10px 0;
    font-size: 1.2em; /* Larger font for mobile */
    color: #fff; /* Ensure links are white */
  }

  .header__nav__link--last {
     display: block; /* Ensure LOGIN is visible */
  }

  .header__nav__dropdown {
    display: none; /* Hide dropdown by default */
    position: static; /* Reset position for mobile */
    background-color: transparent; /* No separate background */
    padding-left: 15px; /* Indent dropdown items */
    margin-top: 10px;
  }

  .header__nav__item--has-dropdown:hover .header__nav__dropdown {
     display: none; /* Disable hover effect for dropdown */
  }

   /* Style for open dropdown on mobile (controlled by JS potentially, or keep simple) */
  .header__nav__item--has-dropdown.is-open .header__nav__dropdown {
     display: block;
  }

  .header__nav__dropdown .header__nav__link {
    font-size: 1em; /* Slightly smaller font for dropdown items */
    padding: 5px 0;
  }

  /* Adjust hamburger when menu is open */
  .header__hamburger-btn.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .header__hamburger-btn.is-active span:nth-child(2) {
    opacity: 0;
  }
  .header__hamburger-btn.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Change hamburger color when header is fixed and scrolled */
   .header--fixed .header__hamburger-btn span {
      background-color: #1e1d31; /* Dark lines when header is fixed */
   }
   .header--fixed .header__hamburger-btn.is-active span {
      background-color: #fff; /* White lines when menu is open over dark bg */
   }

}

.header__nav__link:hover {
  color: #aaa;
}
/* Remove hover effect for main dropdown parent on desktop */
.header__nav__item--has-dropdown > a:hover + .header__nav__dropdown,
.header__nav__item--has-dropdown .header__nav__dropdown:hover {
    display: block;
}

.header--fixed {
  background-color: #0B1A36;
  transition: background-color .2s ease;
}

@media (max-width: 768px) {
  .header--fixed {
    background-color: rgba(0, 0, 0, 0); /* Transparent on mobile when fixed (for landing page) */
    transition: background-color .5s ease;
  }
}

.header.header--static-blue {
  background-color: #0B1A36; /* Static dark blue for other pages */
}

.hero {
  height: 100vh; /* Adjusted height */
  padding: 40px;
  /* Removed background-image here */
  color: #fff;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
  /* Add space for diagonal */
  z-index: 0;
}

.hero::before {
  /* Darkening overlay */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  /* Adjust opacity as needed */
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #f7efe0;
  /* Color of section below */
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  /* Flipped diagonal */
  z-index: 1;
  /* Above ::before */
}

.hero > * {
  position: relative;
  z-index: 2;
  /* Ensure hero content is above ::before and ::after */
}

.hero__bg-video {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  /* Behind everything */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg-video--mobile {
  display: none;
  /* Hide mobile video by default */
}

.hero__slogan {
  text-align: center;
  font-family: "Libre Caslon Display", serif;
  font-weight: normal;
  letter-spacing: 1px;
  font-size: 4em;
  padding-bottom: 5vh; /* Lowered from 10vh */
  align-self: center;
}

@media (max-width: 1500px) {
  .hero__slogan {
    font-size: 3em;
    margin-top: 200px;
    padding-bottom: 10vh;
  }
}
@media (max-width: 768px) {
  .hero__slogan {
    font-size: 3em;
    margin-top: 200px;
    padding-bottom: 10vh;
  }
}
@media (max-width: 431px) {
  .hero__slogan {
    font-size: 2em;
    margin-top: 300px;
    padding-bottom: 10vh;
  }
}
@media (max-width: 376px) {
  .hero__slogan {
    font-size: 2em;
    margin-top: 200px;
    padding-bottom: 10vh;
  }
}

.hero-convite {
  margin-bottom: auto;
  padding-top: 30vh; /* Increased from 10vh */
}

@media (max-width: 768px) {
  .hero-convite {
    margin-bottom: auto;
    padding-top: 10vh;
  }
}

.hero-convite__descricao {
  display: block;
}

.hero-convite__descricao a {
  display: block;
  text-decoration: none;
  color: #aaa;
  font-size: smaller;
  font-weight: bold;
  margin-top: 8px;
}

.hero-convite__social {
  display: flex;
  padding-bottom: 40px;
}

.hero-convite__social__item {
  padding-right: 16px;
}

.hero-convite__social__item img {
  margin-top: 24px;
  max-width: 24px;
}

.start__passos {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.start__passos__passo {
  max-width: 280px;
  text-align: center;
}

@media (max-width: 768px) {
  .start__passos {
    flex-direction: column;
    align-items: center;
  }
}

.eventos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .eventos {
    grid-template-columns: 1fr;
  }
}

.eventos__evento {
  width: 100%;
  text-align: center;
}

.eventos__evento__img {
  width: 100%;
  object-fit: fill;
  padding-bottom: 8px;
}

.pastores {
  display: block;
  padding-bottom: 40px;
}

.pastores__descricao {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .pastores__descricao {
    grid-template-columns: 1fr;
  }
}

.pastores__descricao p {
  padding-bottom: 24px;
}

.pastores__descricao img {
  margin: 0 auto;
  object-fit: cover;
  width: 300px;
  height: 400px;
  border-radius: 5px;
}

footer {
  background-color: #0B1A36;
  color: #fff;
  width: 100%;
  display: block; /* Ensure it takes full width */
  position: relative; /* Add positioning context */
  left: 0; /* Ensure it starts from the left edge */
  right: 0; /* Ensure it extends to the right edge */
}

footer .footer__container { /* Inner content container */
  padding: 16px 40px; /* Padding for the inner container */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Make the container take full width */
  box-sizing: border-box; /* Include padding in width calculation */
}

footer .social {
  display: flex;
  gap: 16px;
}

footer .social img {
  width: 24px;
}

.bases .bases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.bases .bases__grid .card {
  background-color: #fcf9f4;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

@media (max-width: 768px) {
  .bases .bases__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

a {
  text-decoration: none;
}

.title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 64px;
  color: #fff;
}

.title--medium {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 56px;
  margin-bottom: 24px;
}

.title--small {
  font-size: 20px;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .title--medium {
    font-size: 35px;
  }

  .title--small {
    font-size: 16px;
  }
}

.text {
  font-size: 16px;
}

@media (max-width: 768px) {
  .text {
    font-size: 14px;
  }
}

.container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  padding-inline: 8px;
}

main {
  background-color: #f7efe0;
  position: relative;
  z-index: 0;
}

main .container {
  max-width: 1024px;
  display: block;
  padding-top: 75px;
}

.button {
  padding: 8px 16px;
  display: inline-block;
  margin-top: 16px;
  font-size: .9em;
  font-weight: bold;
  background-color: #28324b;
  color: #fff;
  border-radius: 5px;
}

.card {
  padding: 24px 24px;
}

.blog__video {
  width: 100%;
  max-width: 750px; /* ou qualquer valor desejado */

}

@media (max-width: 768px) {
  .hero__bg-video--desktop {
    display: none;
  }

  .hero__bg-video--mobile {
    display: block;
  }
}

/* Removed custom shape divider CSS */

/* Reverted clip-path styles for #palavra */

/*# sourceMappingURL=maps/main.css.map */

@media (max-width: 600px) {
  .header__nav--is-open .user-photo {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: #fff !important;
    display: block !important;
    margin: 2rem auto 1.5rem auto !important;
  }
}

/* Donation & Solicitation Pages Styling */
.donation-page-section {
    background-color: #fcf9f4;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-top: 1rem;
}

/* Tab Navigation using Bootstrap's nav-tabs component */
.nav-tabs-donations {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1.5rem;
}
.nav-tabs-donations .nav-item {
    margin-bottom: -1px;
}
.nav-tabs-donations .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
    color: #495057;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease-in-out;
}
.nav-tabs-donations .nav-link:not(.active):hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}
.nav-tabs-donations .nav-link.active {
    color: #FC6E51;
    background-color: #fcf9f4;
    border-color: #dee2e6 #dee2e6 #fcf9f4;
}

/* Responsive Tables */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    vertical-align: middle;
}

.table thead th {
    white-space: nowrap;
}

.table .btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

/* Form styling */
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: #FC6E51;
    box-shadow: 0 0 0 0.25rem rgba(252, 110, 81, 0.25);
}

/* Custom Button */
.btn-submit-donation {
    background-color: #FC6E51;
    border-color: #FC6E51;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-submit-donation:hover {
    background-color: #e65a3e;
    border-color: #e65a3e;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* General page adjustments */
main {
    padding-top: 120px; /* Increased padding */
    padding-bottom: 40px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .donation-page-section {
        padding: 1.5rem 1rem;
    }
    .nav-tabs-donations {
        font-size: 0.9rem;
    }
    .nav-tabs-donations .nav-link {
        padding: 0.75rem 0.5rem;
    }
    .table {
        font-size: 0.85rem;
    }
    .table th,
    .table td {
        padding: 0.75rem 0.4rem;
    }
    .title--medium {
        font-size: 2.2rem;
    }
    .btn-submit-donation {
        width: 100%;
        padding: 0.9rem;
    }
}